<template>
	<view>
		<!-- 商品列表 -->
		<uni-list>
			<!-- 提示：列表项默认是无法点击的（不能触发click事件）——除非具备点击反馈，方法1：link  方法2：clickable -->
			<uni-list-item 
				v-for="{lid,title,pic,price,is_onsale,sold_count} in products" 
				:key="lid"
				clickable
				@click="goToDetails(lid)">
				<!-- 左侧插槽：放置大型图片 -->
				<view slot="header">
					<image class="icon" :src="base + pic" mode="widthFix"/>
				</view>
				<!-- 中部插槽：放置标题+价格+好评率 -->
				<view slot="body">
					<text class="title">{{title}}</text>
					<text class="price">￥{{price}}</text>
					<view class="bottom">
						<uni-tag class="tag" v-if="is_onsale==1" text="促销" type="error"/>
						<text>{{sold_count}}条热销评论，100%好评</text>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		<!-- 加载更多 -->
		<!-- <uni-load-more status="more"/> -->
		<!-- <uni-load-more status="loading"/> -->
		<!-- <uni-load-more status="noMore"/> -->
		<uni-load-more :status="isLoading ? 'loading' : (pageNum<pageCount ? 'more' : 'noMore')"/>
	</view>
</template>

<script>
	import { productList, base } from '@/service'
	export default {
		data() {
			return {
				base,	//把其它模块中导入的变量声明为模型变量
				kw: '',				//列表页必需变量1：要显示的商品关键字	
				products: [],		//列表页必需变量2：查询到的所有商品
				pageNum: 0,			//列表页必需变量3：当前加载到哪一页数据了（页号）
				pageCount: 9999,	//列表页必需变量4：满足条件的商品总共分为多少页（页面数量）
				//注意：此处总页数没有初始化为0，而是一个大数，表示“还有更多数据可供加载”
				isLoading: false,	//列表页必需变量5：当前是否正在加载数据，如果是，则不能再发请求了
			}
		},
		//生命周期方法 —— 页面加载时，
		onLoad({kw, bname}){
			//1.读取上一个页面传递来的路由参数
			//2.如果路由参数中存在bname，修改当前页面的标题为该品牌名称
			if(bname){
				uni.setNavigationBarTitle({
					title: bname + '馆'
				})
			}
			//3.如果路由参数中存在kw，则记录下来；否则设置kw为空字符串
			if(kw){
				this.kw = kw
			}
			//4.加载符合条件的第一页数据 
			this.loadNextPageData() //调用"加载下一页数据"情形1
		},
		//生命周期方法 —— 页面滚动到底部了
		onReachBottom() {
			// console.log('------页面滚动到底部了-------')
			//注意：此事件的触发，受pages.json中的“onReachBottomDistance”控制
			this.loadNextPageData()   //“加载下一页数据”方法的第二种调用情形
		},
		//生命周期方法 —— 在页面顶部下拉刷新了
		onPullDownRefresh() {
			//console.log('=====页面在顶部下拉刷新了======')
			//1.清除已经加载的数据
			this.products = []		//清除已经加载的商品数据
			this.pageNum = 0		//重新从第0+1页开始加载
			this.pageCount = 9999	//总页数恢复到初始值
			//2.重新加载第一页数据
			this.loadNextPageData()
			//3.停止页面顶部的“加载中”动画
			uni.stopPullDownRefresh()
		},
		methods: {
			goToDetails(num){
				//跳转到商品详情页，并携带路由参数：商品编号
				uni.navigateTo({
					url: '/pages/details/details?pid=' + num
				})
			},
			//列表页必需的方法：加载下一页数据
			async loadNextPageData(){
				//1.如果当前正在加载数据，或者没有更多数据了，则退出
				if(this.isLoading || this.pageNum>=this.pageCount){
					return
				}
				//2.设定“当前正在加载数据”为真
				this.isLoading = true
				//3.异步请求服务器端接口数据，新获得的数据拼接在已有数据的结尾（而不能覆盖）
				let body = await  productList( this.pageNum+1, this.kw )  //响应消息主体
				this.pageNum = body.pno				//当前加载到的页号
				this.pageCount = body.pageCount		//可供加载的数据总页数
				this.products = [...this.products, ...body.data] //本次加载到的商品数据，拼接到旧数据尾部
				//4.设定“当前正在加载数据”为假
				this.isLoading = false
			}
		}
	}
</script>

<style lang="scss">
.icon {
	width: 180rpx;
	margin-left: -1 * $uni-spacing-row-base;
	margin-right: $uni-spacing-row-base;
}
.title {
	//文字只显示2行，溢出内容用省略号代替
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.price {
	font-weight: bold;
	margin-top: $uni-spacing-col-sm;
	color: $uni-color-primary;
	font-size: $uni-font-size-lg + 1;
}
.bottom {
	flex-direction: row; //弹性容器主轴方向为：横向
	align-items: center;//子元素在交叉轴上对齐方式：居中
	font-size: $uni-font-size-sm + 1;
	color: $uni-text-color-grey;
	.tag {
		padding: 0;
	}
}
</style>
